<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
		<meta name="referrer" content="never">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #222;
			}
			#myCanvas{
				position: absolute;
				left: 0;
				top: 0;
			}
			canvas{
				pointer-events: none;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="600" height="600"></canvas>
		<script type="text/javascript">
			!function (w,e) {
				function Demo(option){
					Object.assign(this,{
						el: "#myCanvas",
						img: "test.png",
						mainWidth: w.innerWidth,
						mainHeight: w.innerHeight,
						canvasContextList: [],
						canvasList: [],
						mouse: {x: window.innerWidth / 2, y: window.innerHeight / 2}, // 实时鼠标位置
						vMouse: {x: window.innerWidth / 2, y: window.innerHeight / 2}, // 一级跟随鼠标位置
						vMouse2: {x: window.innerWidth / 2, y: window.innerHeight / 2}, // 二级跟随鼠标位置
					},option)
					this.init()
				}
				Demo.prototype = {
					init(){
						this.canvas = e.querySelector(this.el)
						this.canvas.style.zIndex = 2
						this.canvas.setAttribute("width",this.mainWidth)
						this.canvas.setAttribute("height",this.mainHeight)
						this.cx = this.canvas.getContext("2d")
						this.canvasContextList.push(this.cx)
						this.canvasList.push(this.canvas)
						this.cloneCanvas()
						this.addEvents()
						this.start()
					},
					cloneCanvas(){
						const c = e.createElement("canvas")
						c.setAttribute("width",this.mainWidth)
						c.setAttribute("height",this.mainHeight)
						this.canvasList.push(c)
						this.cx_clone = c.getContext("2d")
						this.canvasContextList.push(this.cx_clone)
						this.canvas.insertAdjacentElement("afterEnd",c)
						c.style = `position: absolute;left: 0;top: 0;z-index: 1`
						this.canvas_clone = c
						this.canvas.style.mixBlendMode = "screen"
					},
					addEvents(){
						w.addEventListener("resize",evt => {
							this.mainWidth = w.innerWidth
							this.mainHeight = w.innerHeight
							this.canvasList.forEach(c => {
								c.setAttribute("width", w.innerWidth)
								c.setAttribute("height", w.innerHeight)
							})
						})
						w.addEventListener("mousemove",evt => {
							this.mouse.x = evt.clientX
							this.mouse.y = evt.clientY
							evt.preventDefault()
						});
					},
					draw(frame,once){
						if(once){
							frame()
						}else{
							this.timer = setInterval(() => {
								this.canvasContextList.forEach(cx => {
									cx.save()
									cx.clearRect(0,0,this.mainWidth,this.mainHeight)
								})
								frame()
								this.canvasContextList.forEach(cx => {
									cx.restore()
								})
							},60/1000)
						}
					},
					start(){
						console.log(this.canvasList)
						let img = new Image()
						let imgSize = []
						let imgData = {
							r: null, // 红通道数据
							c: null, // 青通道数据
							origin: null // 原始数据
						}
						img.src = this.img
						img.onload = () => {
							imgSize[0] = img.width
							imgSize[1] = img.height
							this.cx.drawImage(img,0,0)
							imgData.origin = this.cx.getImageData(0,0,...imgSize)
							imgData.r = this.cx.getImageData(0,0,...imgSize)
							imgData.c = this.cx.getImageData(0,0,...imgSize)
							for(let i = 0; i < imgData.r.data.length; i++){
								if(i % 4 === 1 || i % 4 === 2){
									imgData.r.data[i] = 0
								}
							}
							for(let i = 0; i < imgData.c.data.length; i++){
								if(i % 4 === 0){
									imgData.c.data[i] = 0
								}
							}
							this.draw(() => {
								this.cx.transform(1,.5,0,1,0,0)
								var dis = {x: this.mouse.x - this.vMouse.x, y: this.mouse.y - this.vMouse.y}
								this.vMouse.x += dis.x / 20
								this.vMouse.y += dis.y / 20
								var dis2 = {x: this.vMouse.x - this.vMouse2.x, y: this.vMouse.y - this.vMouse2.y}
								this.vMouse2.x += dis2.x / 5
								this.vMouse2.y += dis2.y / 5
								this.cx.putImageData(imgData.r,this.vMouse.x - imgSize[0] / 2,this.vMouse.y - imgSize[1] / 2) // 上层给红色
								this.cx_clone.putImageData(imgData.c,this.vMouse2.x - imgSize[0] / 2,this.vMouse2.y - imgSize[1] / 2) // 下层给青色
								this.cx.fillRect(0,0,100,100)
							})
						}
						// let imgData = this.cx.createImageData(400,400)
						// console.log(imgData)
						// let other = this.cx.createImageData(imgData)
						// console.log(other)
						
						// let len = imgData.data.length
						
						// for(let i = 0; i < len; i++){
						// 	if(i % 4 === 3){
						// 		imgData.data[i] = 255
						// 	}else if(i % 4 === 0){
						// 		imgData.data[i] = 255
						// 	}
						// }
					}
				}
				w.Demo = Demo
			}(window,document)
			var d = new Demo()
		</script>
	</body>
</html>